<template>
	<view>
		<view class="expend">
			<view class="">
				<text class="my">我支出的</text>
				<text class="total">共计{{expenditurelength}}笔 合计</text>
			</view>
			<view class="">
				<text class="dollar">￥{{(-expenditure).toFixed(2)}}</text>
			</view>
			<view class="classify">
				<text>支出分类</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="pie" :chartData="chartData" background="none" />
			</view>
		</view>
		<view class="income">
			<view class="">
				<text class="my">我收到的</text>
				<text class="total">共计{{incomelength}}笔 合计</text>
			</view>
			<view class="">
				<text class="dollar">￥{{(income).toFixed(2)}}</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData1" background="none" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"bills":[],
				chartData: {
					categories: [],
					series: [{
						"data": [{
								"name": "基金",
								"value": this.fnumber
							},
							{
								"name": "黄金",
								"value": this.gnumber
							},
							{
								"name": "定期",
								"value": this.onumber
							},
							{
								"name": "活期",
								"value": this.lnumber
							}
						]
					}],
				},
				chartData1: {
					categories: [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					series: [{
							"name": "基金",
							"data": [
								35,
								8,
								25,
								37,
								4,
								20
							]
						},
						{
							"name": "黄金",
							"data": [
								70,
								40,
								65,
								100,
								44,
								68
							]
						},
						{
							"name": "定期",
							"data": [
								100,
								80,
								95,
								150,
								112,
								132
							]
						},
						{
							"name": "活期",
							"data": [
								100,
								80,
								95,
								150,
								112,
								132
							]
						}
					],
				},
			}
		},
		async onLoad() {
			const billBean = {
				"bankCardId": 0,
				"couponId": 1,
				"couponName": "",
				"couponValue": 0,
				"createTime": "",
				"description": "",
				"isloan": 0,
				"memberName": "",
				"modifiedPrice": 0,
				"modifiedTime": "",
				"orderNumber": 0,
				"orderType": "",
				"payPassword": "",
				"payType": "",
				"pid": 0,
				"productId": 0,
				"productName": "",
				"productType": "",
				"share": 0,
				"status": 0,
				"transactionFee": 0,
				"transactionNumber": 0
			}
			const res = await this.$http.bill.selectNewOrder(billBean)
			this.bills = res.slice(2)
			const finacial = res.slice(2).filter(item=>{
				return item.productType=="基金"
			});
			const glode = res.slice(2).filter(item=>{
				return item.productType=="黄金"
			});
			const order = res.slice(2).filter(item=>{
				return item.productType=="定期"
			});
			const live = res.slice(2).filter(item=>{
				return item.productType=="活期"
			});
			this.chartData.series[0].data[0].value=finacial.length;
			this.chartData.series[0].data[1].value=glode.length;
			this.chartData.series[0].data[2].value=order.length;
			this.chartData.series[0].data[3].value=live.length;
			
			this.chartData1.series[0].data[0]=finacial[1].modifiedPrice
			this.chartData1.series[0].data[1]=finacial[2].modifiedPrice
			this.chartData1.series[0].data[2]=finacial[3].modifiedPrice
			this.chartData1.series[0].data[3]=finacial[4].modifiedPrice
			this.chartData1.series[0].data[4]=finacial[5].modifiedPrice
			this.chartData1.series[0].data[5]=finacial[6].modifiedPrice
			
			this.chartData1.series[0].data[0]=glode[0].modifiedPrice
			this.chartData1.series[0].data[1]=glode[1].modifiedPrice
			this.chartData1.series[0].data[2]=glode[2].modifiedPrice
			this.chartData1.series[0].data[3]=glode[3].modifiedPrice
			this.chartData1.series[0].data[4]=glode[4].modifiedPrice
			this.chartData1.series[0].data[5]=glode[5].modifiedPrice
			
			this.chartData1.series[0].data[0]=order[0].modifiedPrice
			this.chartData1.series[0].data[1]=order[1].modifiedPrice
			this.chartData1.series[0].data[2]=order[2].modifiedPrice
			this.chartData1.series[0].data[3]=order[3].modifiedPrice
			this.chartData1.series[0].data[4]=order[4].modifiedPrice
			this.chartData1.series[0].data[5]=order[5].modifiedPrice
			
			this.chartData1.series[0].data[0]=live[0].modifiedPrice
			this.chartData1.series[0].data[1]=live[1].modifiedPrice
			this.chartData1.series[0].data[2]=live[2].modifiedPrice
			this.chartData1.series[0].data[3]=live[3].modifiedPrice
			this.chartData1.series[0].data[4]=live[4].modifiedPrice
			this.chartData1.series[0].data[5]=live[5].modifiedPrice
		},
		computed:{
			income(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice>=0
				});
				return newarr.reduce(function(item,next){
					return item+next.modifiedPrice
				},0);
			},
			incomelength(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice>=0
				});
				return newarr.length
			},
			expenditure(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice<=0
				});
				return newarr.reduce(function(item,next){
					return item+next.modifiedPrice
				},0);
			},
			expenditurelength(){
				const newarr = this.bills.filter(item => {
					return item.modifiedPrice<=0
				});
				return newarr.length
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.expend {
		width: 700rpx;
		height: 700rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		border: 1rpx solid #CCCCCC;
	}

	.income {
		width: 700rpx;
		height: 600rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		border: 1rpx solid #CCCCCC;
	}

	.my {
		font-size: 35rpx;
	}

	.total {
		font-size: 25rpx;
		color: #CCCCCC;
		margin-left: 20rpx;
	}

	.dollar {
		font-size: 50rpx;
		font-weight: bold;
	}

	.classify {
		width: 650rpx;
		height: 100rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.charts-box {
		margin-top: 20rpx;
		width: 100%;
		height: 200px;
	}
</style>
